<template>
    <el-drawer v-model="isShow" title="应急处置详情" :destroy-on-close="true" size="50%" :close-on-press-escape="false"
        :close-on-click-modal="false" :show-close="false">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="应急处置" name="emergency">
                <el-descriptions border :column="2">
                    <el-descriptions-item label="发生地点：">{{ detail.place }}</el-descriptions-item>
                    <el-descriptions-item label="发生时间：">{{ detail.occurdate }}</el-descriptions-item>
                    <el-descriptions-item label="预案名称：">{{ detail.planName }}</el-descriptions-item>
                    <el-descriptions-item label="重点对象：">{{ detail.peopleName }}</el-descriptions-item>
                    <el-descriptions-item label="性别：">
                        <dict-tag :options="sys_user_sex" :value="detail.sex" />
                    </el-descriptions-item>
                    <el-descriptions-item label="是否携带未成年人：：">
                        <dict-tag :options="sys_yes_no" :value="detail.isYet" />
                    </el-descriptions-item>
                    <el-descriptions-item label="是否年龄大于70周岁：：">
                        <dict-tag :options="sys_yes_no" :value="detail.isSeventy" />
                    </el-descriptions-item>
                    <el-descriptions-item label="是否为残障人士：：">
                        <dict-tag :options="sys_yes_no" :value="detail.isDisabled" />
                    </el-descriptions-item>
                    <el-descriptions-item label="是否为醉酒、精神障碍患者且不能正确表达自己意志：" :span="2">
                        <dict-tag :options="sys_yes_no" :value="detail.isDrunken" />
                    </el-descriptions-item>
                    <el-descriptions-item label="已采取的措施和应对：" :span="2">
                        {{ detail.measure }}
                    </el-descriptions-item>
                    <el-descriptions-item label="事件性质：" :span="2">
                        <dict-tag :options="nj_event_nature" :value="detail.nature" />
                    </el-descriptions-item>
                    <el-descriptions-item label="涉及人员及规模：" :span="2">{{ detail.scope }}</el-descriptions-item>
                    <el-descriptions-item label="破坏程度及人员伤亡情况：" :span="2">
                        {{ detail.damage }}
                    </el-descriptions-item>
                    <el-descriptions-item label="发生的起因：" :span="2">{{ detail.cause }}</el-descriptions-item>
                    <el-descriptions-item label="影响程度评估：" :span="2">{{ detail.influence }}</el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="任务列表" name="task">
                <el-table :data="tableData" v-loading="loading" border>
                    <el-table-column prop="adduser_id" label="任务下发人" width="180" />
                    <el-table-column prop="receiver_id" label="任务接收人" width="180" />
                    <el-table-column prop="adddate" label="任务下发时间" width="180" />
                    <el-table-column prop="receivedate" label="接收时间" width="180" />
                    <!--            <el-table-column prop="taskcontent" label="任务内容" width="200"/>-->
                    <el-table-column prop="stateText" label="状态" width="100" />
                    <el-table-column fixed="right" align="center" label="操作" width="100">
                        <template #default="scope">
                            <el-button size="small" link
                                @click="executeFireActionTaskDetailRef.showDetail(scope.row.task_id)">
                                <el-icon class="me-1">
                                    <Delete />
                                </el-icon>
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize"
                    :total="total" @pagination="getList" />
            </el-tab-pane>
        </el-tabs>

        <template #footer>
            <!-- 取消 -->
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
    <ExecuteFireActionTaskDetail ref="executeFireActionTaskDetailRef" />
</template>

<script setup>
import { getEmergencyActionInfo, getTaskListByEmergencyActionId } from "@/api/FireAction/ExecuteFireAction.js";
import { Delete } from "@element-plus/icons-vue";
import ExecuteFireActionTaskDetail from "@/components/ExecuteFireAction/ExecuteFireActionTaskDetail.vue";
import { useTemplateRef } from "vue";
import PageEnum from "@/enum/PageEnum.js";

const { proxy } = getCurrentInstance()
const {
    sys_yes_no, nj_event_nature, sys_user_sex
} = proxy.useDict('sys_yes_no', 'nj_event_nature', 'sys_user_sex')


const isShow = ref(false)
//
const managementId = ref('')


const executeFireActionTaskDetailRef = useTemplateRef('executeFireActionTaskDetailRef')


// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

// 展示抽屉详情
const showDetail = async (data) => {
    changeShowStatus()
    console.log(data)
    managementId.value = data.managementId
    await getExecuteFireActionDetailHandle()
    await getList()
}

defineExpose({ showDetail })

const activeName = ref('emergency')


// 任务列表
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

// 获取列表
const getList = async () => {
    loading.value = true
    const res = await getTaskListByEmergencyActionId(managementId.value)
    total.value = res.total
    tableData.value = res.rows
    loading.value = false
    // console.log('任务列表', res)
}

// 获取应急处置详情
const detail = ref({})
const getExecuteFireActionDetailHandle = async () => {
    const res = await getEmergencyActionInfo(managementId.value)
    // console.log('应急处置详情', res)
    detail.value = res.data
    // console.log(JSON.stringify(queryForms.value))
}

</script>

<style scoped lang="scss"></style>